<template>
    <div>
        <a-modal v-model:visible="openDloag" :width='width' @ok="handleOk" @cancel="handleCancel" :ok-text="okText"
            :cancel-text="cancelText">
            <template #title>
                {{ title ? title : isAdd ? '新增' : "编辑" }}
            </template>
            <a-form :model="fromRowData" @submit="handleSubmit" auto-label-width>
                <a-form-item v-for="item in fromData" :field="item.dataIndex" :label="item.title">
                    <!-- 输入框 -->
                    <a-input v-if="item.type === formType.input" v-model="fromRowData[item.dataIndex]"
                        :placeholder="`请输入${item.title}`" />
                    <!-- 金额输入框 -->
                    <a-input-number v-if="item.type === formType.inputNumber" v-model="fromRowData[item.dataIndex]"
                        :placeholder="`请输入${item.title}`" :precision="2" class="input-demo" />

                    <!-- 图片组件 -->
                    <uploadImg v-if="item.type === formType.img" v-model="fromRowData[item.dataIndex]" />
                    <!-- 下拉框 -->
                    <a-select v-if="item.type === formType.select" :allow-clear="true" :placeholder="`请选择${item.title}`"
                        v-model="fromRowData[item.dataIndex]">
                        <a-option v-for="selectItem in item.selectData" :value="selectItem.value">{{
                            selectItem.name }}</a-option>
                    </a-select>
                    <!-- 自定义组件 -->
                    <component v-if="item.type === formType.component" :is="item.component"
                        v-model="fromRowData[item.dataIndex]"></component>

                    <!-- 富文本 -->
                    <wangedit v-if="item.type === formType.wangedit" v-model="fromRowData[item.dataIndex]"></wangedit>

                    <!-- 插槽 -->
                    <slot v-if="item.type === formType.slot" :name="item.dataIndex" :data="fromRowData"></slot>
                    <!-- 日期选择器 -->
                    <a-date-picker v-if="item.type === formType.singleTime" v-model="fromRowData[item.dataIndex]"
                        value-format="YYYY-MM-DD HH:mm:ss" show-time style="width: 100%;" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script  lang="ts" setup>
import { PropType, ref } from 'vue';
import formType from '../type/formType';

const form = ref({})
const openDloag = ref(false)
//是否是新增
const isAdd = ref(false)

const open = (isAddt: boolean) => {
    isAdd.value = isAddt
    openDloag.value = true
}

interface fromT {
    title: string;
    dataIndex: string;
    type: formType;
    selectData?: Array<Object>
}

const prop = defineProps({
    fromData: {
        type: Array as PropType<fromT[]>,
        default() {
            return [];
        },
    },
    fromRowData: {
        type: Object,
        default() {
            return {};
        },
    },
    width: {
        type: Number,
        default: '40vw',
    },
    callBack: {
        type: Function
    },
    title: {
        type: String
    },
    cancal: {
        type: Function
    },
    okText: {
        type: String,
        default: "提交"
    },
    cancelText: {
        type: String,
        default: "取消"
    },
})

const handleOk = () => {
    prop.callBack(prop.fromRowData)
}

const handleCancel = () => {
    if (prop.cancal) {
        prop.cancal(prop.fromRowData)
    }
    prop.fromRowData.value = {}
}

defineExpose({ open })
</script>
<style scoped lang="less"></style>